<template>
    <el-table :data="tableData" border style="width: 100%">
        <!-- 固定列 -->
        <el-table-column label="姓名" align="center" prop="name" :rowspan="2" />
        <el-table-column label="年龄" align="center" prop="age" :rowspan="2" />
        <el-table-column label="电话" align="center" prop="phone" :rowspan="2" />

        <!-- 朋友信息动态列 -->
        <el-table-column label="朋友信息" :colspan="maxFriendCount * 2">
            <template v-for="idx in maxFriendCount" :key="'friend-col-' + idx">
                <el-table-column :label="`朋友${idx}`" align="center">
                    <el-table-column :label="'姓名'" :prop="`friendInfo[${idx - 1}].name`">
                        <template #default="{ row }">
                            {{ row.friendInfo?.[idx - 1]?.name || '' }}
                        </template>
                    </el-table-column>
                    <el-table-column :label="'年龄'" :prop="`friendInfo[${idx - 1}].age`">
                        <template #default="{ row }">
                            {{ row.friendInfo?.[idx - 1]?.age || '' }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </template>
        </el-table-column>

        <!-- 公司信息动态列 -->
        <el-table-column label="公司信息" :colspan="maxCompanyCount * 2">
            <template v-for="idx in maxCompanyCount" :key="'company-col-' + idx">
                <el-table-column :label="`公司${idx}`" align="center">
                    <el-table-column :label="'名称'" :prop="`companyInfo[${idx - 1}].name`">
                        <template #default="{ row }">
                            {{ row.companyInfo?.[idx - 1]?.name || '' }}
                        </template>
                    </el-table-column>
                    <el-table-column :label="'数量'" :prop="`companyInfo[${idx - 1}].num`">
                        <template #default="{ row }">
                            {{ row.companyInfo?.[idx - 1]?.num || '' }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const tableData = ref([
    {
        name: "张三",
        age: 13,
        phone: "13659842019",
        friendInfo: [
            { name: "Jack", age: 15 },
            { name: "Mick", age: 16 }
        ],
    },
    {
        name: "李四",
        age: 18,
        phone: "13659842019",
        companyInfo: [
            { name: "中百超市", num: 3666 },
            { name: "中百易购", num: 899 }
        ],
    }
])

// 计算最大朋友数量
const maxFriendCount = computed(() => {
    const counts = tableData.value.map(item => item.friendInfo?.length || 0)
    return Math.max(...counts, 1) // 至少显示1列
})

// 计算最大公司数量
const maxCompanyCount = computed(() => {
    const counts = tableData.value.map(item => item.companyInfo?.length || 0)
    return Math.max(...counts, 1) // 至少显示1列
})
</script>